<template>
  <el-header class="header" v-if="isMobile">
    <div class="left">
      <SunMoon @onStatus="getStatus"> </SunMoon>
      <div v-if="isMobile" class="title">{{ title }}</div>
    </div>
    <div v-if="!isMobile" class="title">{{ title }}</div>
    <div class="title">{{ time }}</div>
  </el-header>

  <el-header class="header1" v-else>
    <div class="left">
      <div class="time-box">
        <div class="time">{{ time.split(' ')[1] }}</div>
        <div class="date">{{ time.split(' ')[0] }}</div>
      </div>
    </div>
    <div class="title">{{ title }}</div>
    <div class="right">
      <div class="item" v-for="i in list" :key="i.name" @click="clickView(i)">
        <img class="img" src="@/assets/imgs/header/视角.png" alt="" />
        <div class="text">{{ i.name }}</div>
      </div>
    </div>
  </el-header>
  <Map></Map>
</template>
<script setup>
import { dayjs } from 'element-plus'
import SunMoon from './SunMoon.vue'
import Map from './map.vue'
import { computed, inject } from 'vue'
import modelDatas from '@/assets/json/model.json'

const isDark = useDark()
const toggleDark = useToggle(isDark)
const route = useRoute()
const isMobile = inject('isMobile')
const modelData = modelDatas.model.find((i) => i.name == route.query?.name)
console.log('header',modelData);

let timeId = null
const time = ref('')
// const title = ref('金沙江')
const title = modelData.title
const list =  modelData.angles
const getStatus = (status) => {
  console.log(status)
  toggleDark(status)
}

// switch (route.query.name) {
//   case '金沙江':
//     title.value = '竹巴龙金沙江大桥'
//     list.value = [
//       {
//         name: '视角1',
//         angle: { x: -100, y: 0, z: 100 },
//       },
//       {
//         name: '视角2',
//         angle: { x: 0, y: -100, z: 300 },
//       },
//       {
//         name: '视角3',
//         angle: { x: 100, y: 100, z: -300 },
//       },
//     ]
//     break
//   case '然乌镇':
//     title.value = '然乌镇'
//     list.value = [
//       {
//         name: '视角1',
//         angle: { x: 300, y: 600, z: 300 },
//       },
//       {
//         name: '视角2',
//         angle: { x: 0, y: 6500, z: 300 },
//       },
//       {
//         name: '视角3',
//         angle: { x: -500, y: 600, z: 0 },
//       },
//     ]
//     break
//   case '二郎山':
//     title.value = '二郎山隧道'
//     list.value = [
//       {
//         name: '视角1',
//         angle: { x: -100, y: 0, z: 100 },
//       },
//       {
//         name: '视角2',
//         angle: { x: 50, y: -100, z: 300 },
//       },
//       {
//         name: '视角3',
//         angle: { x: 300, y: 100, z: 100 },
//       },
//     ]
//     break
// }

const clickView = (item) => {
  window.dispatchEvent(
          new CustomEvent('changeAngle', {
            detail: { angle: item.position },
          })
        )
}

onMounted(() => {
  timeId = setInterval(() => {
    time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})
onUnmounted(() => {
  clearInterval(timeId)
})
</script>
<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  // background-color: #36333B;
  background: url('@/assets/imgs/背景.png') no-repeat center / cover;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 0.75rem;

  // border-bottom: 1px solid #ccc;
  --el-header-padding: 0 10px;
  // bac: ##241E2F;

  .left {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 12px;
    color: #fff;
  }
}
.header1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: rgba(0, 21, 41, 0.6) url('@/assets/imgs/header/Title.PNG') center no-repeat;
  background-size: cover;
  z-index: 10;

  // 添加一个遮罩层来确保内容可见性
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   background: rgba(0, 21, 41, 0.6); // 深色遮罩，可以调整透明度
  //   z-index: -1;
  // }

  .left {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;

    .time-box {
      .time {
        font-size: 26px;
        font-weight: 500;
        color: #fff;
        line-height: 1.2;
        letter-spacing: 1px;
      }

      .date {
        margin-top: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }

  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(180deg, #fff 0%, #40e0d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 2;
  }

  .right {
    display: flex;
    align-items: center;
    gap: 40px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;

      .img {
        width: 30px;
        height: 30px;
      }

      .text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}
.title {
  color: #fff;
  font-size: var(--header-font-size);
}
</style>
